<template>
  <EwgDialog ref="Dialog" @close="close()" modal>
    <div class="tower-box">
      <span class="close" @click="close()">关闭</span>
      <ewg-tab
        useLabel
        v-model:value="towterActive"
        :tab-list="towerTab"
      ></ewg-tab>
      <div class="tower-list beautify-scroll">
        <div class="list-scroll-content">
          <div
            class="list-item"
            v-for="o of levelList"
            :class="{ active: o <= currentLevel }"
            :key="'关卡等级' + o"
            @click="handleStartBattle(o)"
            @click.right="handleStartBattle(o)"
          >
            第&nbsp;<span>{{ o }}</span
            >&nbsp;层
          </div>
        </div>
      </div>
      <div class="tower-operate">
        <template v-if="!(currentLevel === 0)">
          <div
            class="button-pre"
            @click="handleStartBattle(currentLevel - 1)"
            v-if="currentLevel > 1"
          >
            咸鱼上一层
          </div>
          <div
            class="button-cur"
            @click="handleStartBattle(currentLevel)"
            v-if="currentLevel > 0"
          >
            原地踏步第{{ currentLevel }}层
          </div>
          <div class="button-next" @click="handleStartBattle(currentLevel + 1)">
            挑战下一层
          </div>
        </template>
        <div
          v-else
          class="button-next"
          @click="handleStartBattle(currentLevel + 1)"
        >
          开始挑战
        </div>
      </div>
    </div>
  </EwgDialog>
</template>
<script lang="ts">
import { computed, reactive, ref } from "vue";
import { towerTab as tabConst, towerTabMap } from "@/const/tower/index";
import { useStore } from "@/store";
import { SysActionTypes } from "@/store/sys/action-types";
import { SysInfo } from "@/const/sys";
const store = useStore();
export default {
  name: "TowerDialog",
  emits: {
    startBattle: (payload: any) => {
      return payload;
    }
  },
  setup(_: any, { emit }: { emit: any }) {
    // dialog
    const Dialog = ref();
    const close = () => {
      Dialog.value.close();
    };
    const open = () => {
      Dialog.value.open();
    };
    // tower

    const towerTab = reactive(
      tabConst.map(({ name, value, describe }) => ({
        label: name,
        value,
        title: describe,
        disabled: false
      }))
    );
    const towterActive = ref(towerTab[0].label);
    const currentLevel = computed(() => {
      const value = store.state.userTowerLevel[towterActive.value];
      return value || 0;
    });
    const levelList = computed(() => {
      const arr = Array.from(
        new Array(currentLevel.value + 1),
        (m, index) => index + 1
      );
      return arr;
    });

    const handleStartBattle = (level: number) => {
      const monsters = towerTabMap.get(towterActive.value);
      store.dispatch(
        SysActionTypes.SYS_PUSH_INFO,
        new SysInfo(`准备进入${towterActive.value}第${level}层`, 2)
      );
      close();
      const option = {
        type: 1,
        label: towterActive.value,
        value: level
      };
      emit(
        // eslint-disable-next-line vue/custom-event-name-casing
        "startBattle",
        monsters.monsterIds.map((monsterId: number) => ({ monsterId, level })),
        option
      );
    };
    return {
      Dialog,
      close,
      open,
      towerTab,
      levelList,
      towterActive,
      currentLevel,
      handleStartBattle
    };
  }
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
.close {
  position: absolute;
  top: 5px;
  right: 5px;
  color: $--color-white;
  cursor: pointer;
}
</style>
